<template>
  <div class="article-page">
    <nav-bar-func :hasEdit="hasEdit" title="博文" :edit="edit"/>
    <el-row>
      <el-col :span="4">
      </el-col>

      <el-col :span="12" class="article-container">
        <el-row class="article-header">
          <el-col>
            <h2 class="article-title">{{ article?.value?.title }}</h2>
            <p class="article-time">发布时间：{{ article?.value?.uploadTime }}</p>
            <p class="article-time">上次更新：{{ article?.value?.updateTime }}</p>
          </el-col>
        </el-row>
        <!--    分隔线    -->
        <el-divider/>

        <el-row class="article-content">
          <el-col>
            <div v-html="article?.value?.htmlContent"></div>
          </el-col>
        </el-row>
        <!--    分隔线    -->
        <el-divider/>

        <el-row class="article-func">
          <el-col>
            <el-button @click="like" round type="primary">喜欢</el-button>
            <el-button @click="notLike" round type="info">不喜欢</el-button>
          </el-col>
        </el-row>
        <!--    分隔线    -->
        <el-divider/>

        <el-row class="article-comment">
          <el-col>
            <el-row class="commit-comment">
              <el-col :span="2"><el-avatar/></el-col>
              <el-col :span="22">
                <el-input
                    type="text"
                    :rows="1"
                    placeholder="发表您宝贵的评论意见吧！">
                  <template #suffix>
                      <el-button type="primary">发表</el-button>
                  </template>
                </el-input>
              </el-col>
            </el-row>
            <!--    分隔线    -->
            <el-divider/>

            <el-row class="article-comment-list">
              <el-col :span="6" class="article-comment-list-commenter">
                <el-avatar class="article-comment-list-commenter-icon"/>
                <p class="article-comment-list-commenter-name">张三</p>
              </el-col>
              <el-col class="article-comment-list-content" :span="15">评论内容</el-col>
              <el-col :span="3" class="article-comment-list-func">
                <el-icon class="article-comment-list-func-item like"><check /></el-icon>
                <el-icon class="article-comment-list-func-item not-like"><close /></el-icon>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-col>

      <el-col :span="5" class="right-block">
        <div class="publish">
          <el-row class="publish-header">
            <el-col class="publish-header-title">作者介绍</el-col>
          </el-row>

          <el-row class="publish-content">
            <el-col class="publish-content-info">
              <div class="publish-content-info-avatar"><el-avatar :size="100"/></div>
              <p class="publish-content-info-name">作者名称</p>
              <div class="publish-content-func">
                <el-button type="primary">关注</el-button>
                <el-button>了解</el-button>
              </div>
            </el-col>
          </el-row>
          <!--    分隔线    -->
          <el-divider/>

          <el-row class="publish-footer" :gutter="20">
            <el-col class="publish-footer-item" :span="6">
              <p class="publish-footer-item-title">文章数量</p>
              <p class="publish-footer-item-number">123</p>
            </el-col>
            <el-col class="publish-footer-item" :span="6">
              <p class="publish-footer-item-title">阅读量</p>
              <p class="publish-footer-item-number">12</p>
            </el-col>
            <el-col class="publish-footer-item" :span="6">
              <p class="publish-footer-item-title">获赞</p>
              <p class="publish-footer-item-number">12398</p>
            </el-col>
            <el-col class="publish-footer-item" :span="6">
              <p class="publish-footer-item-title">粉丝数量</p>
              <p class="publish-footer-item-number">12389</p>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {useRoute} from "vue-router";

import {GET} from '@/api/index.ts'
import {onBeforeMount, reactive, ref} from "vue";
import {ElMessage} from "element-plus";
import {ArrowLeft, Edit, Check, Close} from '@element-plus/icons-vue'
import NavBarFunc from "@/components/navbar/NavBarFunc.vue";

export default {
  name: "ArticlePage",
  components: {
    NavBarFunc,
    ArrowLeft,
    Edit,
    Check,
    Close
  },
  setup() {
    const route = useRoute()
    const articleId = route.params.id
    const article = reactive({})
    const hasEdit = ref(false)

    const getDetail = async () => await GET(`/article/find/${articleId}`).then(res => {
      hasEdit.value = res.data.userId === JSON.parse(localStorage.getItem("user")).userId
      if (res.status === 200) {
        article.value = res.data
      } else {
        ElMessage.error("网络访问出错啦")
      }
    }).catch(err => {
      console.log(err)
      ElMessage.error("访问有误")
    })

    onBeforeMount(() => {
      getDetail()
    })

    const edit = () => {

    }

    const like = () => {

    }

    const notLike = () => {

    }

    return {
      article,
      edit,
      hasEdit,
      like,
      notLike
    }
  }
}
</script>

<style lang="scss" scoped>
.article-page {

  .article-container {
    border: 1px solid #EBEEF5;
    padding: 10px 40px !important;

    .article-header {

      .article-title {
        margin: 40px 0 0;
      }

      .article-time {
        font-size: 13px;
        color: #aaa;
        text-align: right;
      }
    }

    .article-content {
      padding: 20px 10px;
    }

    .article-func {
      text-align: center;
      margin: 50px 0 20px;
    }
    
    .article-comment {

      .commit-comment {
        padding: 10px 20px;
      }

      .article-comment-list {
        padding: 10px 20px;
        border-bottom: 1px solid #F2F6FC;

        .article-comment-list-func {
          vertical-align: center;

          .article-comment-list-func-item {
            display: block;
            font-size: 20px;
            border: 1px solid #409EFF;
            border-radius: 40%;
            margin: 5px 0;
            cursor: pointer;
            color: #fff;
          }

          .like {
            background-color: #409EFF;
          }

          .not-like {
            background-color: #909399;
          }
        }
      }
    }
  }

  .right-block {

    .publish {
      border: 1px solid #EBEEF5;
      padding: 15px 20px;

      .publish-header {
        font-weight: bolder;
        font-size: 16px;
        color: #444;
      }

      .publish-content {
        margin-top: 20px;

        .publish-content-info {
          text-align: center;

          .publish-content-info-name {
            margin: 22px 0;
          }
        }
      }

      .publish-footer {
        text-align: center;
        font-size: 11px;
        color: #909399;

        .publish-footer-item {
          border-right: 1px solid var(--el-border-color-base);

          .publish-footer-item-number {
            font-size: 14px;
            margin-top: 12px;
          }
        }

        .publish-footer-item:last-child {
          border-right: none;
        }
      }
    }
  }
}
</style>